<template>
  <div
    class="mask"
    v-show="showState"
  >
    <div class="rate_area">
      <h3 class="fontsize38">请对我们的服务做出评价</h3>
      <div class="star_area flex-h flex-hsb">
        <div
          class="star"
          v-for="(star, index) in [1, 2, 3, 4, 5]"
          :key="index"
          @click="starIndex = star"
        >
          <i
            class="iconfont icon-shoucang1 fontsize60"
            :class="starIndex >= star ? 'select_star' : ''"
          ></i>
        </div>
      </div>
      <p class="fontsize28">{{starText[starIndex] || '您还没有对我们的服务打分'}}</p>
      <div class="btn_area flex-h flex-hsb fontsize32">
        <div
          class="btn_left"
          @click="showState=false"
        >以后再说</div>
        <div
          class="btn_right"
          @click="rateStar"
        >立即评价</div>
      </div>
    </div>
  </div>
</template>

<script>
import AjaxForBusOpen from '@/utils/AjaxForBusOpen'
export default {
  data() {
    return {
      showState: false,
      starIndex: 0,
      starText: []
    }
  },
  mounted() {
    AjaxForBusOpen('/reservation-car-check-api/carCheck/reservation/evaluationMap', {}).then(data => {
      this.starText[0] = '您还没有对我们的服务打分'
      for (let i = 0; i < data.EVALUATION_MAP.length; i++) {
        this.starText[data.EVALUATION_MAP[i].id] = data.EVALUATION_MAP[i].name
      }
    })
    console.log(this.starText)
  },
  methods: {
    rateStar() {
      if (this.starIndex > 0) {
        this.showState = false
        this.$emit('getStar', this.starIndex)
      } else {
        this.$Toast.then(Toast => {
          Toast.showShortBottom('您还没有对我们的服务打分')
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.rate_area {
  width: 540px;
  height: fit-content;
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 8px; /*no*/
  text-align: center;
  h3 {
    padding-top: 32px;
    border-bottom: 0;
  }
  .star_area {
    padding: 0 100px;
    .star {
      text-align: center;
      i {
        color: #ccc;
        transform: all 0.5s;
      }
      .select_star {
        color: #fecd07;
      }
    }
  }
  p {
    height: 44px;
    line-height: 44px;
    margin: 32px 0;
    color: #666;
  }
  .btn_area {
    border-top: 1px solid #999;
    div {
      width: 100%;
      padding: 20px 0;
      color: #333;
    }
    .btn_right {
      color: #027aff;
      border-left: 1px solid #999; /*no*/
    }
  }
}
</style>
